<template>
  <div>
    <Grid :col="1" :border="false" padding="5px">
      <GridItem>
        <Button icon="md-add-circle" type="primary" @click="addOrganization">添加组织机构</Button>
      </GridItem>
    </Grid>

    <!-- 引入表格 -->
    <Table border :columns="columns" :data="data" row-key="id">

      <template #action="{ row, index }">
        <Button type="default" icon="ios-search" size="small" style="margin-right: 5px" @click="show(row)">查看人员</Button>
        <Button type="success" icon="md-add-circle" size="small" style="margin-right: 5px" @click="addChildOrg(row)">添加子机构</Button>
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editOrg(row)">修改</Button>
        <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>
    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="720"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">

      <!-- 引入菜单表单组件 -->
      <OrganizationForm ref="orgForm" @close-win="closeWin" :drawer="drawer.row"></OrganizationForm>

    </Drawer>

    <OrgMember v-model="orgWin" :org-id="currentOrgId"/>
  </div>
</template>
<script>
import OrganizationForm from '../components/organization/OrganizationForm.vue'
import DotTag from '../components/DotTag.vue'
import OrgMember from '../components/organization/OrgMember.vue'

export default {
  data() {
    return {
      currentOrgId: null,
      orgWin: false,
      drawer: {
        state: false,
        title: "",
        row: {name: "", code: "", state: true} ,
      },
      columns: [
        {title: '机构名', key: 'name', tree: true},
        {title: '机构编号', key: 'code', width: 120},
        {title: '机构状态', key: 'status', slot: 'status', width: 120},
        {title: '创建时间', key: 'createTime', width: 200},
        {title: '操作', slot: 'action', align: 'right', width: 380}
      ],
      orgList: [
        {
          id: 1,
          name: '奇酷网络科技有限公司',
          code: '1000',
          state: true,
          createTime: '2022-11-11 11:22:33',
        },
        {
          id: 2,
          name: '教学部',
          code: '100010',
          state: true,
          createTime: '2022-11-11 11:22:33' ,
          pid: 1,
        },
        {
          id: 3,
          name: '就业部',
          code: '100020',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 1,
        },
        {
          id: 4,
          name: '院校部',
          code: '100030',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 1,
        },
        {
          id: 41,
          name: '咨询一部',
          code: '10003010',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 4,
        },
        {
          id: 42,
          name: '咨询二部',
          code: '10003020',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 4,
        },
        {
          id: 5,
          name: '财务部',
          code: '100040',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 1,
        },
        {
          id: 6,
          name: '人力资源部',
          code: '100050',
          state: true,
          createTime: '2022-11-11 12:22:33',
          pid: 1,
        },
      ],
    }
  },
  methods: {
    addOrganization(){
      this.drawer.state = true ;
      this.drawer.title = "添加组织机构" ;
      this.drawer.row = {name: "", code: "", state: true, pid: null};
    },
    addChildOrg(row) {
      this.drawer.state = true ;
      this.drawer.title = "添加子组织机构" ;
      this.drawer.row = {name: "", code: "", state: true, pid: row.id, parentName: row.name, parentCode: row.code} ;
    },
    editOrg(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改组织机构" ;
      let orgRow = {
        id: row.id ,
        name: row.name,
        code: row.code,
        state: row.state,
        pid: row.pid,
      } ;
      if (row.pid !=null) {
        let parent = this.orgList.find(org => org.id === row.pid);
        let parentCode = parent.code ;
        let parentName = parent.name;
        let code = row.code.substring(parentCode.length);
        orgRow = {...orgRow, parentCode, parentName, code} ;
      }
      this.drawer.row = orgRow ;
    },
    show(row){
      this.orgWin = true ;
      this.currentOrgId = row.id ;
    },
    remove(row) {
       this.$tips.confirm("您确定要移除该组织机构吗？").then(()=> {
          let index = this.orgList.findIndex(org => org.id == row.id);
          console.log(index);
          this.orgList.splice(index, 1);
       }) ;
    },
    closeWin(status) {
      this.drawer.state = false ;
      this.$refs.orgForm.resetValidForm();
    },
    findOrgByPid(pid) {
       let orglist = this.orgList.filter(org => org.pid == pid) ;
       return orglist.map(org => {
          let children = this.findOrgByPid(org.id) ;
          // 组装数据
          return {
             ...org ,
            _showChildren: true,
            children: [...children]
          }
       })
    }
  },
  computed: {
    data() {
      return this.findOrgByPid(null);
    }
  },
  components: {
    OrgMember,
    OrganizationForm,
    DotTag
  },
}
</script>
